<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript">
var  source;
/**
*该函数在文档完成加载后执行
*@return void
*/
function init(){
	var url = "service.php";
	try{
		//建立连接，并监听各种事件
		source = new EventSource(url);
		source.onopen = function(event){
			log("连接已经建立："+this.readyState);
		};
		source.onmessage = function(event){
			log("<b>接收到的数据："+event.data+"</b>");
		};
		source.onerror = function(event){
			log("出错，信息是："+this.readyState);
		};
	}catch(err){
		log(err.message);
	}
}

/**
*该函数用作关闭EventSource连接
*@return void
*/
function quit(){
	log("已经退出############################");
	source.close();
	source = null;
}

/**
*该函数用作将信息写入div元素
*@param String msg 自定义消息内容
*@return void
*/
function log(msg){
	document.getElementById("log").innerHTML+="<br/>"+msg;
}
</script>
</head>
<body>
	<button onClick="init()">开始</button>
	<button onClick="quit()">退出</button>
	<div id="log" style="border:1px dashed #c3c3c3;"></div>
</body>
</html>